<template>
  <!-- 菜单按钮开关管理 -->
  <a-tree
    checkable
    v-model="checkedKeys"
    :selected-keys="selectedKeys"
    :checkedKeys="checkedKeys"
    :tree-data="treeInfo"
    :replace-fields="replaceFields"
    @expand="onExpand"
    @select="onSelect"
    @check="onCheck"
    v-if="treeInfo.length>0"
    :defaultExpandAll="defaultExpandAll"
    :autoExpandParent="true"
    :defaultExpandedKeys="expandedKeys"
  />
</template>
<script>
export default {
  data() {
    return {
      autoExpandParent: true,
      defaultExpandAll: true,
      checkedKeys: [],
      selectedKeys: [],
      expandedKeys: [],
      treeInfo: [],
      IsEnabled: 1,
      replaceFields: {
        children: '',
        key: 'ButtonId',
        title: 'ButtonName',
      },
    }
  },
  props: {
    treeData: {
      default: () => [],
      type: Array,
    },
    // eslint-disable-next-line vue/prop-name-casing
    SelectBtnList: {
      default: () => [],
      type: Array,
    },
  },
  watch: {
    treeData(val) {
      //   console.log('treeData :>> ', val)
      this.treeInfo = this.treeData
    },
    checkedKeys() {},
    selectedKeys() {
      // console.log(' selectedKeys:>> ', this.selectedKeys)
    },
    SelectBtnList() {
      this.checkedKeys = this.SelectBtnList
    },
  },
  created() {
    this.expandedKeys = []
    this.treeData.map((item) => {
      this.expandedKeys.push(item.MenuId)
    })
  },
  methods: {
    onExpand(expandedKeys) {
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      // this.autoExpandParent = false
    },
    onCheck(checkedKeys, info) {
      //   console.log('onCheck', checkedKeys)
      this.checkedKeys = checkedKeys
      this.$emit('checkedBtnKeys', [checkedKeys, info])
    },
    onSelect(selectedKeys, info) {
      //   console.log('onSelect', info)
      this.selectedKeys = selectedKeys
      this.$emit('getBtnAuthInfo', info)
    },
  },
}
</script>
<style lang="less" scoped>
.ant-tree {
  font-size: 20px;
}
</style>